<template>
<div class="issue">
  <div class="el-form-item--small issue-block">
    <label class="el-form-item__label" style="width: 80px">渠道</label>
    <el-select class="el-form-item" size="small" v-model="channel">
      <el-option
          v-for="e of channels"
          :key="e.value"
          :value="e.value"
          :label="e.label"
      ></el-option>
    </el-select>
  </div>
  <div v-show="channel" class="issue-block">
    <div class="form-block">
      <div class="title">仓库地址</div>
      <div class="info">
        <p>
          <span class="info_user">{{warehouseInfo.content}}</span>
          <span class="info_phone">{{warehouseInfo.phone}}</span>
          <span class="info_copy" @click="copyPhone">复制</span>
        </p>
        <p class="info_address">{{warehouseInfo.address}}</p>
      </div>
    </div>
    <div class="form-block">
      <div class="title">目标国收件信息</div>
      <div>
        <AddressForm ref="issueFormRef" :addressForm="issueForm" :regionType="2">
          <el-button class="select-text" type="text" @click="selectLocation">选择地址</el-button>
        </AddressForm>
      </div>
    </div>
    <div class="footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="transport">立即转运</el-button>
    </div>
  </div>
  <el-dialog title="地址" width="560px" :visible.sync="locationVisible" lock-scroll>
    <div class="location-info">
      <el-tabs  type="card" v-model="locationType">
        <el-tab-pane label="国内地址" name="1"></el-tab-pane>
        <el-tab-pane label="国外地址" name="2"></el-tab-pane>
      </el-tabs>
      <div class="location-info_item" v-for="location in locations[locationType]" :key="location.id">
        <el-radio v-model="selectedLocation" :label="location.id" class="location-info_item__radio"></el-radio>
        <div class="location-info_item__detail">
          <p>
            <span v-if="location.isDefault" class="info-default_tag">默认</span>
            <span>{{location.name}}</span>
            <span class="mgl10">{{location.phone}}</span>
          </p>
          <p class="info_address">
            {{location.address}}&nbsp;&nbsp;{{location.city}}&nbsp;&nbsp;{{location.postCode}}&nbsp;&nbsp;{{location.country}}
          </p>
        </div>
        <div class="item_edit">
            <i class="icon__edit el-icon-edit" title="编辑" @click="editLocation(location)"></i>
            <i class="icon__del el-icon-delete" title="删除" @click="delLocation(location.id)"></i>
          </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="locationVisible=false">取消</el-button>
      <el-button size="small" type="primary" @click="confirmSelect">确定</el-button>
    </span>
    <AddressEdit :is-visible.sync="showEdit" :address-item="editItem" @confirm="getLocations"></AddressEdit>
  </el-dialog>
</div>
</template>

<script lang="ts">
import {Component,Watch,Vue} from "vue-property-decorator";
import AddressForm from "@/components/AddressForm.vue";
import {Address} from "@/common/interface";
import AddressEdit from "@/components/AddressEdit.vue";
import {deepClone} from "@/utils";
@Component({
  components: {AddressEdit, AddressForm}
})
export default class extends Vue{
  private channel = ''
  private locationType = '1'
  private issueForm:Address = {
    name:'',
    phone:'',
    address:'',
    postCode:'',
    city:'',
    country:'巴西'
  }
  private channels = [
    {label:'普通货物',value:1},
    {label:'电子产品',value:2},
    {label:'液体粉末',value:3},
    {label:'内地EMS',value:4},
    {label:'广东EMS',value:5}
  ]
  private warehouseInfo = {
    content:'易拉罐010CQ',
    phone:'18665938422',
    address:'广东省东莞市凤岗镇青塘路122号7楼易拉罐转运(邮编:523000)(010CQ)'
  }
  private locationVisible = false
  private locations = {
    '1':[
      {id:1,isDefault:true,name:'name1', phone:'12345', address:'哪里哪里', postCode:'518020', city:'巴塞罗那', country:'巴西'},
      {id:2,isDefault:false,name:'name2', phone:'34567', address:'这里这里', postCode:'518030', city:'巴塞罗那', country:'巴西'},
      {id:3,isDefault:false,name:'name3', phone:'45678', address:'那里那里', postCode:'518040', city:'巴塞罗那', country:'巴西'},
    ],
    '2':[
      {id:4,isDefault:false,name:'name4', phone:'45678', address:'那里那里', postCode:'518040', city:'巴塞罗那', country:'巴西'},
    ]
  }
  private selectedLocation = -1
  private showEdit = false;
  private editItem = {}

  @Watch('locationVisible')
  locationVisibleChange(val){
    if(val){
      this.selectedLocation = this.locations[1][0].id;
      this.locationType = '1'
    }
  }

  created(){

    // this.getChannels()
    // this.getWarehouseInfo();
    // this.getLocations()
  }

  // 获取仓库地址
  getWarehouseInfo(){
    this.$api.order.warehouseLocationApi().then(({data})=>{
      this.warehouseInfo = data;
    })
  }

  // 获取下单渠道
  getChannels(){
    this.$api.order.channelsApi().then(({data})=>{
      this.channels = data;
    })
  }

  cancel(){
    this.issueForm = {
      name:'',
      phone:'',
      address:'',
      postCode:'',
      city:'',
      country:'巴西'
    }
  }

  async transport(){
    const valid = await (this.$refs.issueFormRef as any).validate()
    if(valid){
      console.log('校验通过')
    }
  }

  copyPhone(){
    const clipboard = navigator.clipboard;
    clipboard.writeText(this.warehouseInfo.phone);
    this.$message.success('复制成功')
  }

  selectLocation(){
    this.locationVisible = true;
  }

  confirmSelect(){
    this.issueForm = this.locations[this.locationType].find(e=>e.id == this.selectedLocation);
    this.locationVisible = false;

  }

  // 获取收获地址
  getLocations(){
    this.$api.address.addressListApi().then(({data})=>{
      this.locations = data
    })
  }

  editLocation(item){
    this.showEdit = true;
    this.editItem = deepClone(item);
  }

  delLocation(id){
    this.$api.address.delAddressApi(id).then(res=>{
      this.$message.success('删除成功');
      this.getLocations()
    })
  }

}
</script>

<style scoped lang="scss">
@import "@/styles/_variables";
.issue{
  position: relative;
  padding: 32px 24px 60px;

  .el-input,.el-select{
    width: 360px;
  }
  .el-input__inner{
    display: none;
  }
  .issue-block{
    margin: 0 auto;
    width: 480px;
    .form-block{
      margin: 5px 0 25px 0;
    }
    .title{
      font-weight: bold;
      margin: 5px 0 10px 0;
    }
    .info{
      padding-left: 20px;
      .info_phone{
        margin-left: 8px;
        color: $dark-grey;
      }
      .info_copy{
        display: inline-block;
        background: #b9ec9e;
        color: #487402;
        font-size: 12px;
        border-radius: 20px;
        padding:2px 8px;
        margin-left: 5px;
        cursor: pointer;
      }
      .info_address{
        color: $dark-grey;;
      }
    }
  }
  .footer{
    padding-right: 20px;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
  }
  .select-text{
    position: absolute;
    right: -60px;
  }
  .location-info{
    max-height:460px;
    overflow-y: auto;
    .el-tabs{
      margin-bottom: 10px;
    }
    .location-info_item{
      border:1px solid $border;
      padding: 5px 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      cursor: pointer;
      position: relative;
      .location-info_item__radio{
        margin-right: 0;
      }
      .location-info_item__detail{
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        position: relative;
        .info-default_tag{
          display: inline-block;
          background: $white;
          color: $blue;
          font-size: 12px;
          border-radius: 5px;
          padding:2px 8px;
          margin-right: 5px;
          cursor: pointer;
          border:1px solid $blue
        }
      }
      .item_edit{
        cursor: pointer;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        .icon__edit{
          color: $blue;
        }
        .icon__del{
          margin-left: 8px;
          color: $red;
        }
      }
    }
  }
}
::v-deep .location-info .el-tabs__content{
  display: none;
}
::v-deep .location-info_item__radio .el-radio__label{
  display: none;
}
</style>